<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div class="layui-panel">
        <ul class="layui-menu" id="demoMenu">
          <li lay-options="{id: 100}">
            <div class="layui-menu-body-title">菜单1</div>
          </li>
          <li lay-options="{id: 101}">
            <div class="layui-menu-body-title">
              <a href="#">菜单2<span class="layui-badge-dot"></span></a>
            </div>
          </li>
          <!-- 分割线 -->
          <li class="layui-menu-item-divider"></li>
          <!-- 可收缩菜单组 -->
          <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
            <div class="layui-menu-body-title">菜单组</div>
            <ul>
              <li lay-options="{id: 103}">
                <div class="layui-menu-body-title">菜单组1</div>
              </li>
              <li lay-options="{id: 104}">
                <div class="layui-menu-body-title">菜单组2</div>
              </li>
            </ul>
          </li>
          <!-- 横向子级菜单 -->
          <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
            <div class="layui-menu-body-title">子级菜单</div>
            <div class="layui-panel layui-menu-body-panel">
              <ul>
                <li lay-options="{id: 105,tit:'hellow'}">
                  <div class="layui-menu-body-title">子级菜单1</div>
                </li>
                <li lay-options="{id: 106}">
                  <div class="layui-menu-body-title">子级菜单2</div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["dropdown"], function () {
        var dropdown = layui.dropdown;
        dropdown.on("click(demoMenu)", function (options) {
          console.log(options);
        });
      });
    </script>
  </body>
</html>
